<template>
	<image :src="item.img" mode="" style="width: 100%;"></image>
	<view class="content">
		<view class="head">
			<view class="name">
				{{item.name}}
			</view>
			<view class="dis">你到这里距离{{dis}}km</view>
		</view>
		<button @tap="goto">路径</button>
		<view class="intro">{{item.intro}}</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		CONFIG
	} from '../../untils/config.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '../../store/userStore.js';
	import {
		getMapDistance
	} from '../../untils/tool.js'
	let store = userStore()
	let dis = ref()
	onLoad((data) => {
		getItemById(data.id)
	})
	let item = ref({})
	async function getItemById(id) {
		let data = {
			"objectId": id
		}
		let ed = encodeURI(JSON.stringify(data))
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/xianplayitem?where=" + ed)
		item.value = res.results[0]
		console.log(item.value)
		uni.setNavigationBarTitle({
			title: item.value.name
		})
		dis.value = getMapDistance(store.currentPos.longitude, store.currentPos.latitude, item.value.lon, item.value
			.lat)
	}

	function goto() {
		uni.navigateTo({
			url: `/pages/mywebView/mywebView?lat=${item.value.lon}&lon=${item.value.lat}&name=${item.value.name}&type=2`
			// url:`/pages/mywebView/mywebView?type=2&lat=${item.value.lat}&lon=${item.value.lon}&name=${item.value.name}
		})
	}
	const hasFav = ref(true)

	function onclickFav() {
		hasFav.value = !hasFav.value
	}
</script>

<style lang="scss" scoped>
	.content {
		.head {
			display: flex;

			.dis {
				margin-top: 20px;
				margin-left: 100px;
			}

			.name {
				font-size: 40rpx;
				font-weight: 600;
				margin: 20px;
			}
		}
		.intro{
			margin: 10px;
			font-size: 15px;
			border: 1px solid black;
			padding: 10px;
			border-radius: 10px;
		}
	}
</style>